<template>
  <el-container>
    <el-aside width="360px">
      <div style=" border:3px solid paleturquoise; margin: 5px;">
        <div class="im">
          <img
            :src="avatar"
            alt
            style="border-radius: 100px;border: none;"
            width="200px"
            height="200px"
          />
          <h6>用户名:</h6>
          <el-input v-model="name" :disabled="true" placeholder="请输入内容"></el-input>
          <h6>创建时间:</h6>
          <el-input :disabled="true" v-model="roles" placeholder="请输入内容"></el-input>
        </div>
      </div>
      
    </el-aside>
    <el-container>
      <el-main><el-calendar v-model="value"></el-calendar></el-main>
    </el-container>
  </el-container>
</template>

<script>
import { mapGetters } from "vuex";

export default {
  data() {
    return {
      value: new Date()
    };
  },
  name: "Dashboard",
  computed: {
    ...mapGetters(["name", "roles", "avatar"])
  },
 created() {
   this.init()
 },
  methods: {
    init(){
     this.$router.go(0);
    }
  }

};
// <style rel="stylesheet/scss" lang="scss" scoped>
// .dashboard {
//   &-container {
//     margin: 30px;
//   }
//  
//   &-text {
//     font-size: 30px;
//     line-height: 46px;
//   }
// }
// </style>

// export default {
//   data() {
//     return {
//       currentDate: new Date()
//     };
//   }
// }
</script>





<style>
.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}

.im {
  width: 200px;
  height: 200px;
  margin: 0 auto;
  margin-top: 20px;
  /* padding-top: 10px ; */
  height: 500px;
}

.is-selected {
  color: #1989fa;
}
</style>


